﻿@{
    ViewBag.Title = "第三女神女排课";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section style {
    @* 导入首页样式表 *@
    <link rel="stylesheet" href="/Static/Template/css2/index.css" />
    <link href="../../Static/Template/css2/common.css" rel="stylesheet" />

    <style type="text/css">
        .tip_div {
            width: 400px;
            height: 40px;
            position: absolute;
            top: 0px;
            left: 50%;
            margin-left: -200px;
            background-color: #1daef8;
            border-radius: 15px;
            text-align: center;
            color: white;
            font-size: 20px;
            font-family: "Helvetic Neue", Helvetica, Arial;
        }

        .center-vertical {
            display: block;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
}

@Html.Partial("_header")

<div class="container-fluid" style="padding: 0px;">
    <div class="container-fluid docs-banner">
    </div>
    <div class="container" style="margin-top: -160px;">
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <div class="docs-enrollBox zouban">
                    <h4>走班排课</h4>
                    <p>专业代排课 3天排出优质课表</p>
                    <button id="contactUs" type="button" class="btn btn-default btn-lg" aria-hidden="true" data-toggle="modal" data-target="#leavePhoneModal">
                        联系我们
                    </button>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="docs-enrollBox changgui">
                    <h4>常规排课</h4>
                    <p>简单优雅 永久免费</p>
                    <button id="registerNow" onclick="window.location.href='/Home/Register'" type="button" class="btn btn-default btn-lg">
                        立即注册
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container" id="pcmykb">
    <h4 style="text-align: center; margin: 50px;">排出学校满意的课表</h4>
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="pcmykb">
                <img src="/Static/Template/image/icon01.png" />
                <p>个性化分班</p>
                <small>强大的分班算法，支持行政班学生集中/分散分班，满足所有学生选课志愿。
                </small>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="pcmykb">
                <img src="/Static/Template/image/icon02.png" />
                <p>排课资源优化</p>
                <small>专业排课师为学校评估资源，定制排课方案，排出适合学校的优质课表。
                </small>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="pcmykb">
                <img src="/Static/Template/image/icon03.png" />
                <p>多种教学模式</p>
                <small>支持全走班、大走班、小走班、常规课等多种教学模式，满足学校个性化排课需求。
                </small>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="pcmykb">
                <img src="/Static/Template/image/icon04.png" />
                <p>便捷高效</p>
                <small>不用为走班排课忙到焦头烂额，提交需求，3天收到优质课表。
                </small>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="pcmykb">
                <img src="/Static/Template/image/icon05.png" />
                <p>附加服务</p>
                <small>附送临时调代课服务，更新调课/代课课表，微信同步查看，教务工作更简单。
                </small>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <h4 style="text-align: center; margin: 50px;">这些学校正在使用云校排课</h4>
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="syyxpk">
                <img src="/Static/Template/image/logo01.png" />
                <p>北京市十一学校</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="syyxpk">
                <img src="/Static/Template/image/logo02.png" />
                <p>华东师范大学第二附属中学</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="syyxpk">
                <img src="/Static/Template/image/logo03.png" />
                <p>山东省潍坊第一中学</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="syyxpk">
                <img src="/Static/Template/image/logo04.png" />
                <p>北京一零一中学上地分校</p>
            </div>
        </div>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="leavePhoneModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" style="z-index: 1050;">
        <div class="modal-content" style="width: 450px; text-align: center;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">请留下联系电话，客服人员会尽快联系您~
                </h4>
            </div>
            <div class="modal-body" style="text-align: center; font-size: 100%;">
                <div style="display: inline-block; width: 100%; height: 33px; line-height: 33px; margin: 5px 0px;">
                    <div class="col-xs-3" style="text-align: right;"><span>所在地区</span></div>
                    <div class="col-xs-9">
                        <link rel="stylesheet" href="/Static/Template/css/city-picker.css" />
                        <script src="/Static/Template/js/city-picker.data.js"></script>
                        <script src="/Static/Template/js/city-picker.js"></script>
                        <script>
                            $(function () {
                                $(".city-picker-span").css("width", "100%");
                                $(".city-picker-dropdown").css("width", "100%");
                            })

                        </script>
                        <div data-toggle="city-picker" class="form-control" style="width: 100%;">
                            <input id="list_area" readonly="true" type="text">
                        </div>
                    </div>
                </div>
                <div style="display: inline-block; width: 100%; height: 33px; line-height: 33px; margin: 5px 0px;">
                    <div class="col-xs-3" style="text-align: right;"><span>学校名称</span></div>
                    <div class="col-xs-9">
                        <input id="contactSchoolName" class="form-control" type="text" placeholder="学校全称"
                            style="width: 100%; height: 100%;">
                    </div>
                </div>
                <div style="display: inline-block; width: 100%; height: 33px; line-height: 33px; margin: 5px 0px;">
                    <div class="col-xs-3" style="text-align: right;"><span>联系人</span></div>
                    <div class="col-xs-4" style="padding-right: 5px;">
                        <input id="contactName" class="form-control"
                            type="text"
                            placeholder="姓名"
                            style="width: 100%; height: 100%;">
                    </div>
                    <div class="col-md-5" style="padding-left: 5px;">
                        <input id="contactPhone" class="form-control"
                            type="text"
                            placeholder="联系电话"
                            style="width: 100%; height: 100%;">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button id="submitCustomerInfo" type="button" class="btn btn-primary" onclick="submitContactInfo();">
                    提交
                </button>
            </div>

            <div class="modal-footer" style="text-align: center;">
                <div><span>加入排课QQ群，客服人员和专业排课师都在群里呦~</span></div>
                <div>
                    <img src="/static/template/image/qunCQRCode.png" width="200px">
                </div>
                <div><span>QQ群号：321446863</span></div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<!-- 提示框 -->
<div class="tip_div">
    <span class="center-vertical">这是提示信息</span>
</div>
@Html.Partial("_footer")


@section script {
    <script type="text/javascript">

        function submitContactInfo() {
            var postData = validateContactForm();
            if (postData) {
                $.post("/Home/AddContact", postData, function (data) {
                    if (data.status) {
                        //取消弹窗。
                        $("button[ data-dismiss='modal']").click();
                        // 给出提示信息
                        showTip("联系信息添加成功!");

                        // 清空提交数据
                        $("#contactSchoolName").val("");
                        $("#contactName").val("");
                        $("#contactPhone").val("");
                        $(".title1 span").text("");
                        //postData = null;
                    }
                });
            }
        }


        var phoneRegex = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
        //表单验证
        function validateContactForm() {
            var schoolName = $("#contactSchoolName").val();
            if (!schoolName) {
                $("#contactSchoolName").addClass("error-info");
                return false;
            }
            var contactName = $("#contactName").val();
            if (!contactName) {
                $("#contactName").addClass("error-info");
                return;
            }
            var contactPhone = $("#contactPhone").val();
            if (!phoneRegex.test(contactPhone)) {
                $("#contactPhone").addClass("error-info");
                return;
            }

            var listArea = "";
            $.each($(".title1 span"), function (i, item) {
                // console.log($(item).text());
                listArea += $(item).text() + "-";
                $(".city-picker-span").css("border-bottom-color", "");
            });
            listArea = listArea.trimEnd("-");

            if (listArea == "") {
                $(".city-picker-span").css("border-bottom-color", "red");
                return false;
            }


            var obj = {
                location: listArea,
                schoolname: schoolName,
                linkman: contactName,
                phoneNum: contactPhone
            }

            return obj;
        }


        (function () {
            $(".modal-body input").focus(function () {
                $(this).removeClass("error-info");
                $(".city-picker-span").css("border-bottom-color", "");
            });
        })();


        //去除字符串尾部空格或指定字符  
        String.prototype.trimEnd = function (c) {
            if (c == null || c == "") {
                var str = this;
                var rg = /s/;
                var i = str.length;
                while (rg.test(str.charAt(--i)));
                return str.slice(0, i + 1);
            }
            else {
                var str = this;
                var rg = new RegExp(c);
                var i = str.length;
                while (rg.test(str.charAt(--i)));
                return str.slice(0, i + 1);
            }
        }



        function showTip(tip) {
            $(".center-vertical").text(tip);
            var $that = $(".tip_div");
            $that.animate({ "top": "50px" });
            setTimeout(function () {
                $that.animate({ "top": "0px" });
            }, 4000);
        }

    </script>

    <style type="text/css">
        .error-info {
            border-color: red !important;
        }
    </style>


}